<template>
	<view class="content">
		<u-navbar :is-back="false" title="科普中心" :border-bottom="false" :background="{backgroundColor: '#00a8ff'}">
			<view class="navbar-right" slot="right">
				<image src="../../../static/icon/infoicon.png" @click="openinfo('/pages/order/infoContent/infoContent')"
					style="margin-right: 20rpx;width: 25rpx;height: 25rpx;" mode=""></image>
			</view>
		</u-navbar>
		<u-search style="width: 100%;background-color: #00a8ff;" placeholder="请输入您想了解内容的关键词" :clearabled="false"
			v-model="serch" :show-action="false" class="u-p-26">
		</u-search>
		<!-- 编辑内容Icon  -->
		<image @click="openinfo('/pages/tabBar/scienceCenter/editContent/editContent')"
			src="../../../static/icon/bugicon.png" class="editIcon">
		</image>
		<view class="wrap">
			<view class="u-tabs-box u-m-b-20">
				<u-tabs-swiper activeColor="#44a3ff" ref="tabs" :list="cateList" :current="current" @change="change"
					:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(cate,index) in cateList" :key="index">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<u-waterfall v-model="flowList" ref="uWaterfall">
							<template v-slot:left="{leftList}">
								<view class="u-p-12" v-for="(item, index) in list1" :key="index">
									<u-lazy-load threshold="-450" border-radius="10" :image="oss+item.resource"
										@click="openinfo('/pages/tabBar/scienceCenter/screnceShow?id='+item.id)">
									</u-lazy-load>
									<p>{{item.title}}</p>
									<view class="" style="margin: 15rpx 0;">
										<view class="" style="display: inline-block;">
											<image :src="oss+item.user_info.avatar" mode=""
												style="width: 20px;height: 20px;margin-right: 10rpx;border-radius: 50%;">
											</image>
											<text class="nickname">{{item.user_info.nickname}}</text>
										</view>
										<view class="" style="display: inline-block;float: right;">
											<u-icon name="heart" v-show="item.is_like==false"
												style="margin-right: 7rpx;" @click="like(item.id)">
											</u-icon>
											<u-icon name="heart-fill" color="#ff3648" style="margin-right: 7rpx;"
												v-show="item.is_like==true" @click="like(item.id)">
											</u-icon>
											<text
												style="color: #9b9b9b;font-size: 16rpx;line-height: 10px;position: relative;top: -5rpx;">{{item.like_count}}</text>
										</view>
									</view>
								</view>
							</template>
							<template v-slot:right="{rightList}">
								<view class="u-p-12" v-for="(item, index) in list2" :key="index">
									<u-lazy-load threshold="-450" border-radius="10" :image="oss+item.resource"
										@click="openinfo('/pages/tabBar/scienceCenter/screnceShow?id='+item.id)">
									</u-lazy-load>
									<p>{{item.title}}</p>
									<view class="" style="margin: 15rpx 0;">
										<view class="" style="display: inline-block;">
											<image :src="item.user_info.avatar" mode=""
												style="width: 20px;height: 20px;margin-right: 10rpx;border-radius: 50%;">
											</image>
											<text class="nickname">{{item.user_info.nickname}}</text>
										</view>
										<view class="" style="display: inline-block;float: right;">
											<u-icon name="heart" v-show="item.is_like==false"
												style="margin-right: 7rpx;" @click="like(item.id)">
											</u-icon>
											<u-icon name="heart-fill" color="#ff3648" style="margin-right: 7rpx;"
												v-show="item.is_like==true" @click="like(item.id)">
											</u-icon>
											<text
												style="color: #9b9b9b;font-size: 16rpx;position: relative;top: -5rpx;">{{item.like_count}}</text>
										</view>
									</view>
								</view>
							</template>
						</u-waterfall>
					</scroll-view>
				</swiper-item>
			</swiper>
			<u-loadmore :status="status" />
		</view>
	</view>
</template>
<script>
	export default {
		onShow() {
			// 获取科普列表标签
			this.$apiCoupe.cate().then((res) => {
				this.cateList.push("推荐");
				this.cateList = res.data.data;
				console.log(res.data.data);
			}).catch((err) => {
				this.loading = false;
				console.log('request fail', err);
			});
			// 获取信息
			this.scienceList();

		},
		data() {
			return {
				status: 'loadmore',
				list: 10,
				page: 0,
				oss: 'http://zjmeifeng.oss-cn-beijing.aliyuncs.com/',
				flowList: [],
				list1: [],
				list2: [],
				checked: true,
				value: 1,
				serch: '',
				cateList: [], // Tab栏
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				items: []
			}
		},
		methods: {
			onReachBottom() {
				// 加载更多
				console.log("加载更多");
				if (this.page >= 3) return;
				this.status = 'loading';
				this.page = ++this.page;
				setTimeout(() => {
					this.list += 10;
					if (this.page >= 3) this.status = 'nomore';
					else this.status = 'loading';
				}, 2000)
			},
			// 科普列表
			scienceList() {
				this.$apiCoupe.listcontent({
					science_cate_id: "1",
					// 分类id
					search: '',
					// 标题搜索
					limit: '',
					page: ''
				}).then((res) => {
					console.log('res.data.data.item', res.data.data.items);
					let arr = res.data.data.items;

					for (let key in arr) {
						if (arr[key].resource != null) {
							console.log(arr[key].resource.endsWith('，'));
							let array = arr[key].resource.split('，');
							console.log("array", array);
							arr[key].resource = array[0];
							console.log(arr[key].resource);
						}
					}
					// 遍历 arr
					let arr1 = [],
						arr2 = [];
					for (let i = 0; i < arr.length; i++) {
						if (i % 2 == 0) {
							arr1.push(arr[i]);
						} else {
							arr2.push(arr[i])
						}
					}
					console.log(arr1);
					console.log(arr2);
					this.list1 = arr1;
					this.list2 = arr2;

				}).catch((err) => {
					this.loading = false;
					console.log('request fail', err);
				});
			},
			// 点赞 // 获取当前点击元素
			like(item_id) {
				
				this.$apiCoupe.like({
					id: item_id
				}).then((res) => {
					
					uni.showToast({
						title: res.data.msg,
						icon: 'success',
						mask: true
					});
				}).catch((err) => {
					this.loading = false;
					console.log('request fail', err);
				});
				this.scienceList();
			},

			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			openinfo(url) {
				uni.navigateTo({
					url: url,
				});
			},
			// tab栏切换
			change(index) {
				// 加载数据
				console.log(index + 1);
				let count = index + 1;
				this.$apiCoupe.listcontent({
					science_cate_id: count
				}).then((res) => {
					console.log('request success 加载数据', res.data.data.items);
					let arr = res.data.data.items;
					let arr1 = [],
						arr2 = [];
					for (let i = 0; i < arr.length; i++) {
						if (i % 2 == 0) {
							arr1.push(arr[i])
						} else {
							arr2.push(arr[i])
						}
					}
					console.log(arr1);
					console.log(arr2);
					this.list1 = arr1;
					this.list2 = arr2;
				}).catch((err) => {
					this.loading = false;
					console.log('request fail', err);
				});
				this.swiperCurrent = index;
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			}

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #FDFDFD;

		.bg {
			background-color: #FFFFFF;
		}

		.nickname {
			color: #9b9b9b;
			font-size: 18rpx;
			line-height: 20rpx;
			float: right;
			line-height: 20px;
		}

		.wrap {
			display: flex;
			flex-direction: column;
			height: calc(100vh - var(--window-top));
			width: 95%;
		}

		.swiper-box {
			flex: 1;
		}

		.swiper-item {
			height: 100%;
		}

		// 编辑图标
		.editIcon {
			width: 92rpx;
			height: 92rpx;
			position: fixed;
			right: 30rpx;
			bottom: 160rpx;
			z-index: 999;
		}
	}
</style>
